.expandedSigner
  position relative
  overflow hidden
  box-sizing border-box
  margin 6px
  padding-bottom 24px
  border-radius 27px
  background var(--ghostA)
  transform translate3d(0, 0, 0)
  padding-top 8px

.signer
  position relative
  width 100%
  overflow hidden
  box-sizing border-box
  margin 6px 0px 0px 0px
  padding-bottom 24px
  border-radius 27px
  box-shadow 0px 4px 8px var(--ghostY)
  transform translate3d(0, 0, 0)
  border-radius 27px
  background var(--ghostAZ)
  box-shadow 0px 4px 8px var(--ghostY), 0px 2px 8px var(--ghostY)
  border-bottom 2px solid var(--ghostY)

.signerMenuItems
  display flex
  justify-content center
  align-items center

.signerTop
  position relative
  display flex
  justify-content space-between
  align-items center
  padding 24px 16px

.signerDetails
  display flex
  justify-content center
  align-items center

  .signerName
    height 28px
    padding-left 14px
    border-radius 8px
    font-size 18px
    font-weight 300
    padding-top 4px
    box-sizing border-box
    font-family 'MainFont'
    text-transform capitalize
    letter-spacing 0px
    font-weight 400
    white-space nowrap
    overflow hidden
    text-overflow ellipsis
    width 190px

    .signerNameUpdate
      position absolute
      width 28px
      height 28px
      right -34px
      color var(--good)
      display flex
      align-items center
      cursor pointer
      pointer-events none
      opacity 0
      *
        pointer-events none

.signerExpand
  height 26px
  width 54px
  border-radius 20px
  box-sizing border-box
  background var(--ghostA)
  border 3px solid var(--ghostZ)
  cursor pointer
  display flex
  justify-content center
  align-items center

  *
    pointer-events none

.signerExpand:hover
  background var(--ghostB)

.signerNameFocused
  background var(--ghostZ)
  .signerNameUpdate
    opacity 1
    
.signerType
  position absolute
  top 20px
  right 44px
  font-size 11px
  text-transform uppercase
  font-weight 400
  letter-spacing 0px


.signerStatusIndicator
  position absolute
  top 26px
  right 18px
  font-size 12px
  text-transform uppercase
  font-weight 400
  background var(--ghostZ)
  width 10px
  height 10px
  border-radius 5px

.signerStatusIndicatorLocked
  background var(--moon)

.signerStatusIndicatorReady
  background var(--good)

.signerStatusText
  padding 0px 32px 16px 32px
  margin 0px 6px 6px 6px
  border-radius 20px
  font-size 12px
  text-transform uppercase
  text-align center
  font-weight 500
  letter-spacing 1px
  color var(--outerspace)

.signerStatusError
  color var(--bad)

.signerStatusIssue
  color var(--moon)

.signerStatusReady
  color var(--good)

.signerBottom
  left 0
  right 0
  bottom 0
  height 20px
  display flex
  justify-content space-between
  align-items center
  font-size 14px
  font-weight 300
  display flex
  justify-content center
  align-items center
  padding 18px 16px 10px 16px

  .signerBottomPages
    border-radius 8px
    font-size 13px
    font-weight 400
    width 66px
    text-align center

  .signerBottomPageBack
    background var(--ghostA)
    padding 2px 1px 2px 2px
    height 30px
    width 45px
    border-radius 15px
    cursor pointer
    box-sizing border-box
    border 3px solid var(--ghostZ)
    cursor pointer
    box-sizing border-box
    display flex
    justify-content center
    *
      pointer-events none

  .signerBottomPageNext
    background var(--ghostA)
    transform rotate(180deg)
    padding 2px 2px 2px 1px
    height 30px
    width 45px
    border-radius 15px
    cursor pointer
    box-sizing border-box
    border 3px solid var(--ghostZ)
    display flex
    justify-content center
    *
      pointer-events none

  .signerBottomPageBack:hover, .signerBottomPageNext:hover
    background var(--ghostB)

.signerDrawer
  position relative
  height 60px

  .showControls
    position absolute
    height 20px
    border-radius 13px
    border 3px solid var(--ghostZ)
    background var(--ghostA)
    z-index 2
    top 14px
    left 50%
    width 100px
    margin-left -53px
    padding-bottom 2px
    letter-spacing 1px
    font-size 11px
    display flex
    justify-content center
    align-items center
    text-transform uppercase
    cursor pointer
    color var(--outerspace)
    transition var(--standardFast)
    font-weight 400

  .showControls:hover
    background var(--ghostB)
    color var(--outerspace)

  .showControlsLine
    height 3px
    position absolute 
    top 50%
    left 0
    right 0
    background var(--ghostZ)
    z-index 1
    margin-top -3px

.signerControls
  padding-top 16px

  .signerControlDetail
    height 40px
    margin 0px 10px 11px 10px
    display flex
    justify-content center
    align-items center
    box-sizing border-box
    font-size 16px
    font-weight 400
    border 2px solid var(--ghostA)
    border-radius 9px

    .signerControlDetailKey
      font-size 11px
      margin 4px 4px 6px 4px
      letter-spacing 1px

    .signerControlDetailValue
      margin 4px
      font-family 'FiraCode'

  .signerControlOption
    height 52px
    margin 0px 10px 11px 10px
    background var(--ghostA)
    border-radius 20px
    color var(--outerspace)
    display flex
    justify-content center
    align-items center
    font-weight 400
    font-size 13px
    cursor pointer
    letter-spacing 0px
    box-sizing border-box
    text-transform uppercase
    border 3px solid var(--ghostZ)

    *
      pointer-events none

  .signerControlOption:hover
    background var(--ghostB)

  .signerControlOptionImportant
    color var(--bad)

  .signerControlOptionEffect
    color var(--moon)

  .signerControlOptionSuccess
    color var(--good)

.signerLatticePair
  height 200px

  .signerLatticePairTitle
    height 40px
    display flex
    justify-content center
    align-items center
    font-size 14px
    font-weight 300
    text-transform none
    color var(--moon)

  .signerLatticePairInput
    background var(--ghostC)
    height 60px
    border-radius 12px
    margin 10px 10px 20px 10px

    input
      width 100%
      height 100%
      background transparent
      border none
      outline none
      color var(--outerspace)
      text-align center
      font-size 22px
      letter-spacing 6px
      padding-left 6px
      font-family 'MainFont'

  .signerLatticePairSubmit
    width 100px
    height 30px
    display flex
    justify-content center
    align-items center
    background var(--ghostC)
    border-radius 12px
    position relative
    left 50%
    margin-left -50px
    cursor pointer
    letter-spacing 1px
    font-size 13px
    text-transform uppercase
    font-weight 300
    padding-left 1px

    *
      pointer-events none

.signerAccountsTitle
  // background pink
  font-size 12px
  font-weight 300
  display flex
  justify-content center
  align-items center
  // height 40px
  padding 0px 12px 0px 12px

.signerAccountsTitleActive
  text-transform uppercase
  font-size 10px
  font-weight 300
  letter-spacing 1px
  display flex
  justify-content center
  align-items center
  color var(--outerspace)

  .signerAccountsTitleActiveCount
    font-size 13px
    margin-left 5px
    font-weight 400
    margin-top -1px
    height 24px
    width 24px
    border-radius 12px
    box-sizing border-box
    display flex
    justify-content center
    align-items center
    padding-left 1px
    background var(--ghostB)

.signerAccounts
  //position absolute
  // bottom 30px
  // right 8px
  // left 8px
  margin 7px 6px
  // padding 8px
  text-align center
  
  // border-radius 8px
  font-size 11px
  // text-transform uppercase
  font-weight 400
  // height 204px
  overflow hidden
  // overflow-x hidden
  background var(--ghostZ)
  border-radius 20px

  .signerAccount:first-child
    border-top-right-radius 17px
    border-top-left-radius 17px

  .signerAccount:last-child
    border-bottom-right-radius 17px
    border-bottom-left-radius 17px

  .signerAccount:first-child:last-child
    border-radius 17px

  .signerAccountsAdd
    padding 16px
    font-size 12px
    cursor pointer
    text-transform uppercase
    font-weight 400
    letter-spacing 1px

  .signerAccountsAdd:hover
    color var(--good)

  .signerAccount
    display flex
    height 36px
    margin 3px
    width calc(100% - 6px)
    position relative
    background var(--ghostZ)
    color var(--outerspace)
    border-radius 8px
    box-sizing border-box
    cursor pointer

    *
      pointer-events none

    .signerAccountIndex
      position absolute
      top 2px
      left 3px
      bottom 3px
      width 30px
      display flex
      justify-content center
      align-items center
      font-weight 500
      
    .signerAccountAddress
      display flex
      justify-content center
      align-items center
      position absolute
      left 30px
      bottom 7px
      right 40px
      font-size 15px
      overflow hidden
      font-family 'FiraCode'
      font-weight 250

      svg
        margin 2px 4px 0px 4px

    .signerAccountCheck
      position absolute
      top 15px
      right 16px
      bottom 0
      width 6px
      height 6px
      border-radius 3px
      display flex
      justify-content center
      align-items center
      color var(--ghostZ)
      background var(--outerspace)

  .signerAccountAdded
    background var(--ghostA)

    // .signerAccountIndex
    //   color var(--good)

    .signerAccountCheck
      background var(--good)

  .signerAccount:hover
    background var(--ghostA)

  .signerAccountAdded:hover
    background var(--ghostB)

  .signerAccountDisabled
    background var(--ghostA)
    cursor auto

  .signerAccountDisabled:hover
    background var(--ghostA)

.signerLoading
  height 60px
  display flex
  justify-content center
  align-items center
  padding 20px

.signerLoadingLoader, .signerLoadingLoaderafter
  border-radius 50%
  width 50px
  height 50px

.signerLoadingLoader
  margin 60px auto
  font-size 10px
  position relative
  text-indent -9999em
  border-top 3px solid var(--ghostZ)
  border-right 3px solid var(--ghostZ)
  border-bottom 3px solid var(--ghostZ)
  border-left 3px solid var(--good)
  transform translateZ(0)
  animation load8 0.5s infinite linear
  will-change transform

@keyframes load8
  0%
    -webkit-transform rotate(0deg)
    transform rotate(0deg)

  100%
    -webkit-transform rotate(360deg)
    transform rotate(360deg)

.signerInterface
  font-size 16px
  width 100%
  transition var(--standard)
  position relative
  display flex
  text-align center
  flex-direction column
  overflow hidden
  font-size 14px

  .trezorPhraseInput
    position relative
    display flex
    justify-content center
    align-items center
    background var(--ghostY)
    height 36px
    border-radius 8px
    width calc(100% - 20px)
    overflow hidden
    margin-bottom 18px

    svg
      margin 0px 5px

    input 
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      width 100%
      height 100%
      text-align center
      font-size 20px
      outline 0
      border 0
      background transparent
      color var(--outerspace)
      letter-spacing 4px

  .trezorPinWrap
    width 100%
    position relative
    display flex
    justify-content center
    transition var(--standard)
    overflow hidden
    display flex
    justify-content center
    align-items center
    flex-direction column
    z-index 20
    padding-bottom 0.5em

    .signerPinMessageOr
      font-size 10px
      text-transform uppercase
      font-weight 300
      padding 5px

    .signerPinMessage
      height 32px
      width 140px
      display flex
      justify-content center
      align-items center
      overflow hidden
      position relative
      font-size 13px
      padding-bottom 2px
      background var(--ghostB)
      box-shadow 0px 2px 6px var(--ghostZ)

      .signerPinDelete
        position absolute
        display flex
        justify-content center
        align-items center
        top 0px
        bottom 0px
        width 40px
        left -40px
        border-radius 8px
        background var(--ghostC)
        cursor pointer
        
      .signerPinDelete:hover
        background var(--ghostD)

    .signerPinSubmit
      width 250px
      border-radius 8px
      cursor pointer
      font-size 12px
      text-transform uppercase
      text-align center
      font-weight 300
      display flex
      justify-content center

      .signerPinDelete
        left 0px

    .signerPinSubmit:hover
      background var(--ghostC)

    .trezorPinInputWrap
      width 100%
      position relative
      display flex
      justify-content center
      transition var(--standard)
      padding 10px 0px 25px 0px
      height 100px

      .trezorPinInput
        display flex
        width 120px
        height 120px
        flex-wrap wrap-reverse
        z-index 1000

        .trezorPinInputButton
          min-width 40px
          min-height 40px
          display flex
          justify-content center
          align-items center

        .trezorPinInputButton:hover
          svg
            transform scale(1.7)

        .trezorPinInputButton:active
          svg
            transform scale(2.1)
            transition none

.expandedSignerTitle
  display flex
  justify-content center
  align-items center
  text-transform none
  font-family 'MainFont'
  letter-spacing 0px
  font-size 16px
  font-weight 400
  padding-right 2px
  text-transform capitalize

  .expandedSignerIcon
    margin-right 12px

.signerAddedAccountTitle
  display flex
  justify-content center
  align-items center
  text-transform uppercase
  font-size 9px
  margin 2px 0px 4px 0px
  font-weight 500
  letter-spacing 1px
  padding-top 8px

@import '../SignerStatus/style'
